/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed;">
      <div class="content mt10">
        <div class="center">影视会员领取</div>
      </div>
        <div class="content mt3">
        <div class="left">该设备绑定账号 : {{data.user_account}}</div>
      </div>
    </header>
    <div class="mui-content bgGrep" >
      <div class="mui-scroll-wrapper" style="padding-top: 56px;">
          <div>
          <div class="result">
            <template v-if="isTrue">
              <img src="./../images/fail.svg">
            </template>
            <template v-else="">
                <img  id='default' v-show="data.orderUrl === ''"  v-bind:src="data.orderInfo">
                <span v-show="data.orderUrl != ''"  id='imgs'></span>
                <!--<img id='imgs'  v-show="data.orderUrl != ''" v-else>-->
            </template>
          </div>
          <template v-if="isTrue">
            <div class="content" >
              <div class="center">图片获取失败</div>
            </div>
          </template>
          <template v-else>
            <div class="content">
              <div class="left"><div class="circle"></div> 第一步 :  上传您的 "订单" 截图</div>
            </div>
          </template>
          <div class="mui-icon-load-uplaod mui-btn mui-btn-upload" @tap="selectFile()"><span class="">{{uplaod}}</span></div>
          <div id='button' class="mui-btn mui-btn-SingIn" @tap="saveFn()">下一步</div>
        </div>
     </div>
    </div>
  </div>
</template>

<script>
  import store from '../submit-store';
  import {tools} from 'tools';
  var $ = require('jquery');
  import {FastClick} from 'fastclick';
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        data: store.state.loginData,
        uplaod: '上传',
        isTrue: false,
        r: ''
      };
    },
    methods: {
      selectFile: function () {
        var self = this;
        tools.uploadFile('camera', false, function (value) {
          tools.show('图片加载中...');
          var formData = new FormData();
          formData.append('file', value);
          $.ajax(`${store.state.loginData.url}vip/terminalOrderUpload/v2/upload`, {
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
              console.info(data);
              var datas = JSON.parse(data);
              if (datas.status == '2000') {
                self.isTrue = false;
                store.state.loginData.orderUrl = self.data.orderUrl = datas.url;
                self.uplaod = '重新上传';
                tools.createImage('#imgs', value);
//                document.getElementById('imgs').setAttribute('src', datas.url);
                setTimeout(function () {
                  tools.hide();
                }, 1000);
              } else {
                tools.hide();
                self.uplaod = '重新上传';
                self.isTrue = true;
              }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              tools.hide();
              self.uplaod = '重新上传';
              self.isTrue = true;
            }
          });
        });
      },
      saveFn: function () {
        if (this.data.orderUrl) {
          this.$router.go('/second');
        } else {
          tools.msgShow('请上传一张 "订单" 截图');
        };
      }
    },
    route: {
      data: function (data) {
        console.info(data);
        this.isTrue = false;
        if (!store.state.loginData.orderInfo) {
          store.getImageFn(function () {});
        };
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
      FastClick.attach(document.body);
    }
  };
</script>
